<template>
 

  <div class="w-100 h-100">
       <fakeLenfend
         :color="useOptions().colors.value.splice(0,3)"
         :text="['重大项目','中型项目','小型项目']"
       >
       </fakeLenfend>
       <div class="w-100" style="height: 100%">
    <div
    id="xmjt_suamanry"
      class="w-100"
      style="height: 100%; position: relative"
    ></div>
  </div>
     </div>
 </template>
 
 <script setup lang='ts'>
 import * as echarts from "echarts";
 import fakeLenfend from '@/components/project/fakeLegend.vue'
 import {useOptions} from '@/hook/useOptions'
 const props = defineProps({
 EchartsData: {
  type: Array,
  default: () => [],
 },
 });
 let month=useOptions().month
  let option = {
   tooltip: {
     show:false
   },
   grid: {
     left: '10%',
     right: '10%',
     bottom: '20%',
     containLabel: true
   },
   xAxis: [
     {
       type: 'category',
       data:month
     }
   ],
   yAxis: [
     {
       type: 'value',
       axisLabel: {
       formatter: "{value}%",
         fontSize: 20,
         color: "#667A8E",
     },
     }
   ],
   series: [
 
    
     {
       name: 'Baidu',
       type: 'bar',
       barWidth: "30%",
       stack: 'Search Engine',
       emphasis: {
         focus: 'series'
       },
       data: [10,12,15,9,7,10,5,6,12,9,3,2]
 
     },
     {
       name: 'Google',
       type: 'bar',
       stack: 'Search Engine',
       emphasis: {
         focus: 'series'
       },
       data: [7,10,5,6,12,9,3,10,12,15,9,,2]
 
     },
     {
       name: 'Bing',
       type: 'bar',
       stack: 'Search Engine',
       emphasis: {
         focus: 'series'
       },
       data: [10,12,15,9,7,10,5,6,12,9,3,2]
 
     },
     
   ]
 };
 let myChart:any
 onMounted(()=>{
 
  myChart = echarts.init(
  document.getElementById('xmjt_suamanry') as HTMLElement
 );
 myChart.setOption(option)
 })
 onBeforeUnmount(() => {
   // 销毁 ECharts 实例
   if (myChart) {
     myChart.dispose();
   }
 });
 </script>
 
 <style>
 
 </style>